<template>
<div id="DOTKWRAP">
    <div id="DOTKINSIDEFLEX">
        <el-container>
            <el-aside>
                <el-card id="tTab" shadow="always">
                    <el-card id="TIMETAB">
                        进度
                        <el-progress :percentage="progress" :format="progressFormat"></el-progress>
                        时间
                        <el-progress v-if="time" :format="timeFormat" :percentage="100 * (time / tatolTime)"></el-progress>
                        <br/>
                        <el-button id="SUBMIT_BTN" @click="makeSureToSubmit">交卷</el-button>
                    </el-card>
                    <el-tabs :stretch="true" v-model="tabsActiveName">
                        <el-tab-pane label="单选题" name="dan">
                            <button
                             :class="{'tab-list-button-active':t.answer!=''}"
                             class="tab-list-button"
                             v-for="(t,index) in tList.filter(t=>t.type=='radio')"
                             :key="t.t_id"
                             type="primary"
                             @click="showT(t.t_id)"
                            >
                            {{ index+1 }}
                            </button>
                        </el-tab-pane>
                        <el-tab-pane label="多选题" name="duo">
                            <button
                             v-for="(t,index) in tList.filter(t=>t.type=='mult')"
                             :key="t.t_id"
                             class="tab-list-button"
                             :class="{'tab-list-button-active':t.answer.trim()!=''}"
                             type="primary"
                             @click="showT(t.t_id)"
                            >
                            {{ index+1 }}
                            </button>
                        </el-tab-pane>
                    </el-tabs>
                </el-card>
            </el-aside>
            <el-main>
                <el-card shadow="always">
                    <main-ttable @change="changeAnswer" @next="nextT" :t="tList.filter(t=>t.t_id == activeTid)[0]" />
                </el-card>
            </el-main>

        </el-container>
    </div>
</div>
</template>

<script>
import MainTtable from "components/content/main/mainTtable.vue"
import request from "api"
export default {
    name:"mainDoTk",
    components:{
        MainTtable
    },
    data(){
        return {
            isAlreadyDone:false,
            tabsActiveName:"dan",
            tk_id:null,
            tList:[],
            activeTid:0,
            progress:0,
            tatolTime:0,
            time:0,
            timer:0,
        }
    },
    methods:{
        nextT(){
            if(this.activeTid)
                this.activeTid++
        },
        showT(tid){
            this.activeTid = tid
            console.log(tid);
        },
        changeAnswer(ans){
            this.tList.map(t=>{t.t_id == this.activeTid && (t.answer = ans)})
            this.progress = (this.tList.filter(t=>t.answer!="").length / this.tList.length) * 100
            this.$set(this.tList)
        },
        submitT(){
            if(this.isAlreadyDone)return;
            let t_list = JSON.parse(JSON.stringify(this.tList))
            t_list.map(t=>{
                delete t.A
                delete t.B
                delete t.C
                delete t.D
                delete t.title
                if(t.type=="mult"){
                    t.answer = t.answer.split("").sort().join("")
                }
            })
            return request({
                method:"post",
                url:"/checkTk/"+this.tk_id,
                data:{
                    t_list,
                    //tk_id:this.tk_id,
                }
            }).then(res=>{
                this.$message({
                    type: 'success',
                    message: '提交成功!'
                });
                this.$router.push("/main")
                console.log(res);
                clearInterval(this.timer)
            })
        },
        progressFormat(p){
            return p.toFixed()+"%"
        },
        timeFormat(){
            const time = this.time
            const min = Math.floor(time / 60)
            const sec = time - min * 60
            return min+":"+sec
        },
        getTkTs(){
            return request({
                method:"get",
                url:"/student/TK/"+this.$route.params["tk_id"],
            }).then(res=>{
                if(res.state != "DONE"){
                    this.tList = res.data
                    this.startTimeOut(res.time*60)
                    this.tList.map(t=>{t.answer=""})
                    this.activeTid = this.tList[0].t_id
                }else{
                    console.log(res);
                    this.isAlreadyDone = true
                    this.$message({
                        message:"你已经做过这套试卷了！",
                        type:"error"
                    })
                }
            })
        },
        makeSureToSubmit() {
            this.$confirm('你确定要提交吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.submitT()
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消提交'
            });          
            });
        },
        startTimeOut(time){
            let that = this
            that.tatolTime = time
            this.timer = setInterval(()=>{
                console.log(that.time++);
                if(that.time==time){
                    console.log("TimeOut");
                    that.submitT()
                    clearInterval(that.timer)
                }
            },1000)
        }
    },
    computed:{
    },
    watch:{
        tList(){
            this.progress = this.tList.filter(t=>{t.answer!=""}).length
        }
    },
    mounted(){
        this.getTkTs()
        this.tk_id = this.$route.params["tk_id"]
    }
}
</script>

<style scoped>
#TIMETAB{
    height: 180px;
    min-height: 0;
}
#DOTKWRAP{
    background-color: #eee;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#DOTKINSIDEFLEX{
    min-width: 1000px;
    width: 70%;
    min-height: 500px;
    height:80%;
}
#SUBMIT_BTN{
    width: 100%;
}
.el-container{
    height: 100%;
}
.el-card{
    min-height: 450px;
    height: 90%;
}
.el-main{
    padding: 0;
}
.tab-list-button{
    outline: none;
    padding: 0;
    margin: 0;
    width: 40px;
    height: 40px;
    border:1px solid #409EFF;
    border-radius: 50%;
    background-color: #ecf5ff;
    color:#409eff;
    font-weight: bold;
    font-size: 1.1rem;
    cursor:pointer;
}
.tab-list-button-active{
    border: 1px solid #409EFF;
    background-color: #409EFF;
    color: #fff;
}
.el-tab-pane{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.el-tabs{
    height: calc(100%);
}
</style>